<template>
    <div class="page-container page-customerManage">
        <div class="operations4">
            <div class="operation-btns">
                <div @click="exportToExcel">全部导出</div>
            </div>
            <div class="search-user">
                <el-input v-model="searchKey" class="search-input" placeholder="请输入姓名或电话用户" style="width: 200px;"></el-input>
                <div class="search-btn" @click="search">查询</div>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="0"></el-tab-pane>
            <el-tab-pane label="普通用户" name="1"></el-tab-pane>
            <el-tab-pane label="企业管理员" name="2"></el-tab-pane>
        </el-tabs>
        <div class="user-manager">
            <el-table :data="userList" border tooltip-effect="dark" style="width: 100%;"
                @selection-change="handleSelectionChange">
                <el-table-column label="编号" align="center" width="70">
                    <template slot-scope="scope">
                        <div>{{ scope.row.cardId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" align="center" label="姓名" width="100"></el-table-column>
                <el-table-column prop="phone" align="center" width="110" label="手机号码"></el-table-column>
                <el-table-column prop="personalWx" label="微信号码" align="center" show-overflow-tooltip width="150"></el-table-column>
                <el-table-column prop="companyName" align="center" label="所属企业" show-overflow-tooltip></el-table-column>
                <el-table-column prop="position" align="center" label="职位" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column prop="seeNum" align="center" label="名片访问量" width="95"></el-table-column>
                <el-table-column align="center" label="创建时间" width="140">
                    <template slot-scope="scope">
                        <div>{{ scope.row.createTime | formatDateMin }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="80">
                    <template slot-scope="scope">
                        <div style="text-align: center;">
                            <el-button class="checkCard" @click="checkCard(scope.row.cardId)" type="text"
                                style="color: #51cdcb;" size="medium">详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { selectCustomerListApi } from '@/api/api.js';
import { getCookie } from '@/utils/util.js'
import { serverUrl } from "@/utils/server.js";
const Qs = require('qs');

export default {
    data() {
        return {
            searchKey: '',
            lastSearchKey: '',
            multipleSelection: [],
            activeName: '0',
            userList: [],
            total: 0,
            pageNum: 1
        };
    },
    created() {
        this.getCustomerList();
    },
    mounted() {
    },
    methods: {
        getCustomerList() {
            let params = {
                pageNum: this.pageNum,
                name: this.searchKey
            }
            if (this.activeName !== '0') {
                params.userType = this.activeName
            }
            selectCustomerListApi(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    this.userList = res.data.pageInfo.list;
                    this.lastSearchKey = params.name;
                } else {
                    this.userList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.userList = [];
            })
        },
        // 改变类别
        handleClick(tab, event) {
            this.pageNum = 1
            this.searchKey = ''
            this.lastSearchKey = ''
            this.userList = []
            this.getCustomerList();
        },
        // 页面变更
        handleCurrentChange() {
            this.getCustomerList();
        },
        search() {
            this.getCustomerList();
        },
        // 多选数据改变
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        checkCard(id) {
            this.$router.push({ path: "/cardPage", query: { id: id } })
        },
        // 导出
        exportToExcel() {
            let params = {
                name: this.searchKey
            }
            if (this.activeName !== '0') {
                params.userType = this.activeName
            }
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'businessCard/selectCustomerListExport', {
                headers: headers,
                method: 'POST',
                body: Qs.stringify(params)
            }).then(res => {
                return res.blob();
            }).then(res => {
                let link = document.createElement('a');
                let url = window.URL.createObjectURL(res);
                link.href = url;
                link.download = '用户列表.xlsx';
                link.click();
                window.URL.revokeObjectURL
            });
        }
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .el-tabs__item {
        height: 74px;
        line-height: 74px;
    }
    .page {
        padding: 10px 0;
        text-align: center;
    }
    .user-manager {
        padding: 0 20px;
    }
}
.operations4 {
    position: absolute;
    top: 20px;
    right: 10px;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .operation-btns {
        display: flex;
        div {
            border-radius: 4px;
            background: #51CDCB;
            font-size: 14px;
            line-height: 40px;
            height: 40px;
            color: #fff;
            padding: 0 20px;
            margin-right: 10px;
            cursor: pointer;
        }
        .disabled {
            background: #B9EBEA;
        }
    }
    .search-user {
        display: flex;
        .search-input {
            height: 40px;
            margin-right: 10px;
            .el-input__inner {
                height: 40px;
            }
        }
        .search-btn {
            border-radius: 4px;
            background: #51CDCB;
            font-size: 14px;
            line-height: 40px;
            height: 40px;
            color: #fff;
            padding: 0 20px;
            cursor: pointer;
        }
        .disabled {
            background: #B9EBEA;
        }
    }
}
</style>